<template>
  <div>
    <el-row style="border: 1px solid rgba(0, 123, 255, 0.2);width:60%;margin-left:20%;">
      <el-col :span="24" style="border-bottom: 1px solid rgba(0, 123, 255, 0.2);padding:15px;text-align:center;background-color: rgba(0, 123, 255, 0.15);">
        <div class="grid-content bg-purple">豪车之家客服聊天系统</div>
      </el-col>
      <el-col :span="18">
        <div class="content-top">
          <!-- 消息区 -->
<!--  -->
          <!-- <div class="lite-chatbox" v-show="right">
            <div class="cright cmsg">
              <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  :src="'/lib/img/A.jpg'"/>
              <span class="name">SuperPaxxs</span>
              <span class="content">{{mysend}}</span>
            </div>
          </div> -->
          <div class="lite-chatbox" v-show="right1" id="right1">
              <div class="cleft cmsg">
                <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  :src="'../../lib/chat/img/B.jpg'"/>
                <span class="name"><span class="htitle admin">admin</span>客服1号</span>
                <span class="content"><span id="aaa"></span></span>
              </div>
          </div>
          <div class="lite-chatbox" v-show="right">
            <div class="cright cmsg">
              <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  :src="'../../lib/chat/img/A.jpg'"/>
              <span class="name">SuperPaxxs</span>
              <span class="content">{{mysend}}</span>
            </div>
          </div>
        </div>
        <!--  -->
          
        <div class="content-bottom">
          <textarea class="message" id="message" cols="30" rows="10" placeholder="在此输入文本消息..." v-model="message" @keyup.enter="sendMessage"></textarea>
        </div>
        <el-row id="btn">
          <el-button type="primary" plain @click="sendMessage">提交</el-button>
        </el-row>
      </el-col>
      <el-col :span="6" style="height:490px;border-left: 1px solid rgba(0, 123, 255, 0.2);">
        <div class="grid-content bg-purple-light">常见问题</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data(){
    return {
      webs:"",
      mId:5,
      message:"",
      mysend:"",
      info:{},
      right:false,
      right1:false
    }
  },
  methods:{
    sendMessage(){
      let data = {
        adminId: this.mId,
        uId: 1,
        content: this.message
      }
      this.ws.send(JSON.stringify(data));
      this.mysend = this.message;
      // 
      this.right=true;
      this.ws.onmessage = function (evt) {
        // console.log(evt);
        let info = JSON.parse(evt.data);
        console.log(document.getElementById("aaa").innerHTML = info.content);
      }
      this.message="";
    },
    localSocket() {
      let that = this;
      if ("WebSocket" in window) {
          // console.log("您的浏览器支持 WebSocket!");
          // that.ws = new WebSocket("ws://chatserver.cn.utools.club/koa/ws?id="+this.mId);
          that.ws = new WebSocket("ws://127.0.0.1/koa/ws?id="+this.mId);
          that.global.setWs(that.ws);
          that.ws.onopen = function () {
              console.log('websocket连接成功');
          };
          this.ws.onmessage = function (evt) {
            console.log(evt);
            let info = JSON.parse(evt.data);
            console.log(document.getElementById("aaa").innerHTML = info.content);
            document.getElementById("right1").style.display = "block"
            // console.log('连接==>'+evt.data);
          }
          // that.ws.onclose = function () {
          //     // 关闭 websocket
          //     console.log("连接已关闭...");
          //     //断线重新连接
          //     setTimeout(() => {
          //         that.localSocket();
          //     }, 2000);
          // };
      } else {
          // 浏览器不支持 WebSocket
          console.log("您的浏览器不支持 WebSocket!");
          this.openNotificationWithIcon('error', '浏览器', '您的浏览器不支持显示消息请更换', 1,1)
      }
    },
    getConnention(){
      // 获取管理员id
      // this.mId = JSON.parse(localStorage.getItem("adminInfo"))[0].a_id
      this.webs = new WebSocket('ws://chatserver.cn.utools.club/koa/ws?id=' + this.mId);
      this.webs.onopen = function () {
        console.log('连接成功');
      }
      this.webs.onmessage = function (evt) {
        console.log(evt);
        let info = JSON.parse(evt.data);
        console.log(document.getElementById("aaa").innerHTML = info.content);
        document.getElementById("right1").style.display = "block"
        // console.log('连接==>'+evt.data);
      }
    }
  },
  created(){
    // this.getConnention();
    this.localSocket();
  },
  beforeDestroy(){
    this.ws.onclose = function(){
      // 关闭 websocket
      alert("连接已关闭..."); 
    };
  }
}
</script>

<style scoped>
@import url('../../lib/chat/litewebchat.min.css');


.content-top{
    height: 100%;
    min-height: 319px;
  }
  .content-bottom{
    height: 150px;
    min-height:150px;
    width: 98.5%;
  }
  .question{
    height: 50px;
    border-bottom: 1px solid rgba(86, 61, 124, .2);
    line-height: 50px;
    padding-left: 20px;
  }
  .clearmp{
    margin: 0;
    padding: 0;
  }
  .message{
    width: 100%;
    height: 100%;
    border: none;
    resize: none;
    padding: 10px 5px;
    background-color: #E6E2EB;
  }
  #message:focus{
    outline: none;
  }
  #btn{
    position: absolute;
    right: 25%;
    bottom: 0%;
  }
</style>